import { api } from '@/global';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Tag, Modal, message } from 'antd';
import React, { Component, useEffect, useRef, useState } from 'react';
import { request } from 'umi';
const confirm = Modal.confirm;
import RefuseModule from '../RefuseModule';
type propsType = {
  selectNode: string;
};

type FileListType = {
  id: string;
  fileState: number;
  fileApprover: string;
  fileCause: string;
  fileTimes: number;
  createTime: string;
  finalTime: number;
  fileId: string;
  fileName: string;
  fileOssPath: string;
  fileDescribe: string;
  fileSuffix: string;
  pathName: string;
  bucketName: string;
};

const downloadFile = (data, fileName) => {
  if (!data) {
    return;
  }
  const url = window.URL.createObjectURL(new Blob([data]));
  const link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', fileName + '.pdf');
  document.body.appendChild(link);
  link.click();
};

export default (props: propsType) => {
  const [data, SetData] = useState<FileListType[]>();
  const actionRef = useRef<ActionType>();

  const reload = () => {
    actionRef.current?.reload();
  };

  const columns: ProColumns<FileListType>[] = [
    {
      valueType: 'indexBorder',
      dataIndex: 'id',
    },
    {
      title: '文件名称',
      dataIndex: 'fileName',
    },
    {
      title: '文件描述',
      dataIndex: 'fileDescribe',
    },
    {
      title: '已审批次数',
      dataIndex: 'fileTimes',
    },
    {
      title: '所上传的文件夹',
      dataIndex: 'pathName',
    },
    {
      title: '所上传的文件筒',
      dataIndex: 'bucketName',
    },
    {
      title: '文件创建审批时间',
      dataIndex: 'createTime',
      valueType: 'date',
      sorter: (a: FileListType, b: FileListType) => {
        const acreate = dayjs(a.createTime).valueOf();
        const bcreate = dayjs(b.createTime).valueOf();
        return acreate - bcreate;
      },
    },
    {
      title: '状态',

      dataIndex: 'status',
      render: (_, b) => {
        if (b.fileState === 0) {
          return <Tag color="#bdc3c7">取消审批</Tag>;
        }
        if (b.fileState === 1) {
          return <Tag color="#74b9ff">审批中</Tag>;
        }
        if (b.fileState === 2) {
          return <Tag color="#2ed573">审批通过</Tag>;
        }
        if (b.fileState === 3) {
          return <Tag color="#ff6348">审批未通过</Tag>;
        }
      },
    },
    {
      title: '审批上传人',
      dataIndex: 'fileApprover',
    },

    {
      title: '下载',
      width: 50,
      render: (_, b) => {
        return (
          <a
            onClick={() => {
              request(api.addFileDownload, {
                params: {
                  id: b.id,
                },
              });

              if (b.fileSuffix === 'pdf') {
                downloadFile(b.fileOssPath, b.fileName);
              } else {
                window.open(b.fileOssPath);
              }
            }}
            key={b.fileOssPath + b.fileState}
          >
            下载
          </a>
        );
      },
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: (_, b) => [
        <a
          key={b.id + 'pass'}
          onClick={() => {
            confirm({
              title: '审批通过' + b.fileName,

              onOk: async () => {
                const result = await request(api.passApprovalFile, {
                  method: 'POST',
                  data: { fileId: b.id },
                });

                if (result.success) {
                  message.success('审核通过');
                  actionRef.current?.reload();
                } else {
                  message.error('审核失败');
                }
              },
              onCancel() {},
            });
          }}
        >
          同意
        </a>,
        <RefuseModule key={b.id} reload={reload} fileId={b.id} />,
      ],
    },
  ];

  return (
    <ProTable<FileListType>
      actionRef={actionRef}
      request={async () => {
        return await request(api.getDeptApproverList, {
          params: {
            deptId: props.selectNode ? props.selectNode : 0,
          },
        });
      }}
      params={props.selectNode}
      columns={columns}
      search={false}
    />
  );
};
